<template>
  <div>
    <!--    1.表格-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column
          label="菜单名称"
          width="180">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="图标"
          width="100">
        <template slot-scope="{ row }">
          <i :class="row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column
          prop="url"
          label="url"
          width="180">
      </el-table-column>
      <el-table-column
          prop="component"
          label="组件路径"
          width="180">
      </el-table-column>
      <el-table-column prop="menuType" label="菜单类型" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.component === ''" type="success">目录</el-tag>
          <el-tag v-else type="danger">菜单</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="updateMenuStatus(scope.row.id)"
          ></el-switch>
          <span>{{ scope.row.status === 0 ? '开启' : '禁用' }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createdAt" label="创建时间" width="170" sortable>
        <template slot-scope="scope">
          {{ scope.row.createdAt | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit(row)">
            <i class="el-icon-edit"></i>
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row.id)">
            <i class="el-icon-delete"></i>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    2.模态框数据-->
    <el-dialog title="编辑" :visible.sync="showEditModal" width="30%">
      <el-form :model="editData" label-width="100px">
        <el-form-item label="id" hidden>
          <el-input v-model="editData.id"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="editData.name"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-select v-model="editData.icon">
            <el-option
                v-for="icon in iconOptions"
                :key="icon.value"
                :label="icon.value"
                :value="icon.value">
              <i :class="icon.value" style="margin-right: 10px;"></i>{{ icon.label }}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 判断children不能为空 并且长度为0 的显示url-->
        <el-form-item label="url" prop="url" v-if="!editData.children || editData.children.length === 0">
          <el-input v-model="editData.url"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" v-if="!editData.children || editData.children.length === 0">
          <el-input v-model="editData.component"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button @click="showEditModal = false">取 消</el-button>
       <el-button type="primary" @click="saveMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {MessageBox} from "element-ui";

export default {
  mounted() {
    this.getMenu();
  },
  data() {
    return {
      iconOptions: [
        { value: 'el-icon-search', label: '搜索' },
        { value: 'el-icon-edit', label: '编辑' },
        { value: 'el-icon-share', label: '分享' },
        { value: 'el-icon-delete', label: '删除' },
        { value: 'el-icon-upload', label: '上传' },
        { value: 'el-icon-download', label: '下载' },
        { value: 'el-icon-setting', label: '设置' },
        { value: 'el-icon-loading', label: '加载' },
        { value: 'el-icon-star-on', label: '收藏' },
        { value: 'el-icon-star-off', label: '取消收藏' },
        { value: 'el-icon-location', label: '位置' },
        { value: 'el-icon-location-outline', label: '位置轮廓' },
        { value: 'el-icon-phone', label: '电话' },
        { value: 'el-icon-phone-outline', label: '电话轮廓' },
        { value: 'el-icon-menu', label: '菜单' },
        { value: 'el-icon-menu-outline', label: '菜单轮廓' },
        { value: 'el-icon-more', label: '更多' },
        { value: 'el-icon-more-outline', label: '更多轮廓' },
        { value: 'el-icon-s-goods', label: '商品' },
        { value: 'el-icon-s-data', label: '数据' }
      ],
      showEditModal: false,
      editData: [],
      tableData: []
    };
  },
  methods: {
    // 消息提示 左上角
    open4() {
      this.$notify({
        title: '',
        message: '操作成功',
        position: 'top-left',
        type: 'success'
      });
    },

    // 执行删除操作
    async handleDelete(id) {
      MessageBox.confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const url = `/community/menu/handleDelete/${id}`;
        const response = await this.$http.post(url);
        this.$message.success('员工删除成功');
        await this.getMenu();

      }).catch(() => {
        // 取消删除操作 or 错误处理
        this.$message.error('已取消操作');
      });
    },

    async saveMenu() {
      const url = `/community/menu/saveMenu`;
      const response = await this.$http.post(url, this.editData);
      await this.getMenu();
      this.showEditModal=false;

      this.open4();
    },

    // 执行编辑操作
    async handleEdit(row) {
      this.editData = row;
      this.showEditModal = true;
    },

    // 修改状态
    async updateMenuStatus(id) {
      const url = `/community/menu/updateMenuStatus/${id}`;
      const response = await this.$http.post(url);

      this.$message.success("修改成功")
    },

    // 刷新页面 ,加载数据在tableData
    async getMenu() {
      const url = "/community/menu/getMenusAll";
      const response = await this.$http.post(url);

      this.tableData = response.data.list
    },
  }
};
</script>